<template>
  <div>
    <div class="background-image">
      <img :src="background">
  <div class="block" v-for="fit in fits" :key="fit">
    <span class="demonstration">{{ fit }}</span>
  </div>
</div>
    <!--<el-card class="nojob" v-if="!havejob">暂时没有该岗位信息</el-card>
    <el-card v-if="havejob" v-for="(item, key) in list" :key="key" class="jobcard">
      <div  @click="findDetail(item.recruit.id)">
     <img class="jobavatar" :src="item.company.avatar"/>
     <div class="introduce">
       <p>{{item.enterprise.jobinfo.name}}</p>
       <p>{{item.company.address}}<span>|</span>{{item.company.scale}}<span>|</span>{{item.company.type}}</p>
     </div>
      </div>
    </el-card>-->
    <el-card class="jobresult" >校招分区</el-card><!--暂时设置没有信息显示结果-->
    <!--<el-select class="selectcity" v-model="value1" placeholder="选择城市">
      <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <el-select class="selecttype" v-model="value2" placeholder="选择岗位类型">
      <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <el-select class="selectedu" v-model="value3" placeholder="选择学历要求">
      <el-option v-for="item in edus" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <el-select class="selectenterprise" v-model="value4" placeholder="选择企业类型">
      <el-option
        v-for="item in enterprises"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <el-button class="filter">开始筛选</el-button>-->

    <el-row>
      <el-card class="showjob" v-for="(job, index) in joblist" :key="index">
        <!-- <img
          src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
          class="jobimg"
        /> -->
         <img :src="job.logo" class="jobimg"/>
        <!--<img src="showjob.logo" class="jobimg">-->
        <div class="jobname">
          <!--<p><span>岗位名称</span></p>-->
          <p>{{job.name}}</p>
        </div>
        <div class="jobdetail">
          <p>
            <span>{{job.ename}}</span>
            <span>|</span>
            <span>{{job.jobLocation}}</span>
          </p>
          <p>
            <span>{{job.salary}}</span>
          </p>
          <!-- <p>{{ename}}<span> | </span>{{jobLocation}}</p>
          <p>{{salary}}</p>-->
        </div>
        <el-button type="text" class="button" @click="tojobInfo(jid)">详细信息</el-button>
      </el-card>
    </el-row>

    <div class="block">
       <el-pagination
       @current-change="handleCurrentChange"  
       background
       :page-size="page.pageSize"
       layout="total,  prev, pager, next" 
       :total="page.total"
       :current-page="page.pageNum"></el-pagination>
    </div>   
  </div>
</template>

<style>
@import "../css/index.css";
@import "../assets/Animate/animate.min.css";
.background-image{
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.nojob {
  margin: 0px auto auto auto;
  width: 763px;
}
.jobresult {
  margin: 0px auto auto auto;
  width: 763px;
}
.selectcity{
  left: 0px;
  top: 0px;
  width: 200px;
}
.selectedu{
  left: 0px;
  top: 0px;
  width: 200px;
}
.selectenterprise{
  left: 0px;
  top: 0px;
  width: 200px;
}
.filter{
  left: 0px;
  top: 0px; 
  width: 145px;
}
.showjob {
  margin: 1px auto auto auto;
  width: 763px;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.button {
  padding: 0;
  float: right;
}
.jobimg {
  float: left;
  width: 100px;
  height: 100px;
  margin: auto 14px 20px auto;
}
.jobcard {
  width: 1000px;
  margin: 20px auto auto auto;
}
.jobavatar {
  float: left;
  width: 126px;
  height: 110px;
  margin: auto 14px 20px auto;
}
.jobname {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.jobname p {
  font-size: 18px;
  margin-bottom: 14px;
}
.jobdetail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.jobdetail p {
  font-size: 15px;
  margin-bottom: 5px;
  color: #999;
}

</style>

<script>
import fetch from '../api/fetch'
import backgroundImg from '../assets/background.png'
export default {
  data () {
    return {
      fits: [],
      joblist: [],
      name: "",
      ename: "",
      jobLocation: "",
      salary: "",
      jid: "",
      fit: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      background: backgroundImg,
      content: localStorage.getItem('content'),
      list: [],
      havejob: false,
      cities: [{
          value: 'othercities',
          label: '其他'
        },{
          value: 'Beijing',
          label: '北京'
        }, {
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Nanjing',
          label: '南京'
        }, {
          value: 'Chengdu',
          label: '成都'
        }, {
          value: 'Shenzhen',
          label: '深圳'
        }, {
          value: 'Guangzhou',
          label: '广州'
        },{
          value: 'allcities',
          label: '不限'
        }
        ],      
        edus: [{
          value: 'dazhuan',
          label: '大专'
        },{
          value: 'benke',
          label: '本科'
        }, {
          value: 'shuoshi',
          label: '硕士'
        },{
          value: 'boshi',
          label: '博士'
        },{
          value: 'alledus',
          label: '不限'
        }
        ],
        enterprises: [{
          value: 'otherenterprises',
          label: '其他'
        },{
          value: 'e1',
          label: '互联网'
        }, {
          value: 'e2',
          label: '金融'
        }, {
          value: 'e3',
          label: '快消'
        }, {
          value: 'e4',
          label: '传媒'
        }, {
          value: 'e5',
          label: '餐饮'
        }, {
          value: 'e6',
          label: '教育'
        },{
          value: 'e7',
          label: '化工'
        },{
          value: 'allenterprises',
          label: '不限'
        }
        ],      
        value1: [], 
        value2: [],
        value3: [],
        page:{
          total:1,
          pageSize:10,
          pageNum:1,
        }
    }
  },
  mounted() {
    this.getJob('校招');
  },
  methods: {
    // handleCurrentChange (val) {
    //   this.page.pageNum = val
    //   this.getData() // 调用getData刷新页面上table和分页模块的数据
    // },
    // getData () {
    //   var self = this // axios中this指向发生变化, 用self来代替目前this
    //   var pageNum = {'pageNum': self.page.pageNum} // 想后端传递需要的页码
    //   self.$http.post(this.HOST + 'recruitList', pageNum, {headers: {'Content-Type': 'application/json'}})
    //     .then(res => {
    //       self.$set(self, 'recruitList', res.data.recruitList.list) // table数据更新, 注意着4行的self.$set()中内容, 我们要改变的recruitList是在data下面, 所以target参数是"self",key是"recruitList";pageSize是在data的page下面, 所以target是self.page, key是"pageSize"
    //       self.$set(self.page, 'pageSize', res.data.recruitList.pageSize)
    //       self.$set(self.page, 'total', res.data.recruitList.total)
    //       self.$set(self.page, 'pageNum', res.data.recruitList.pageNum)
    //     })
    //     .catch(err => {
    //       console.log(err)
    //     })
    // },
    tojobInfo(jid) {
      // localStorage.setItem('jobId', id)
      this.$router.push({ name: "jobDescription", params: { jid: 100601 } });
    },
    getJob(keyword) {
      const self = this;
      fetch.searchRes(keyword).then(res => {
        console.log(res);
        this.name = res.data.name;
        this.ename = res.data.ename;
        this.jobLocation = res.data.jobLocation;
        this.salary = res.data.salary;
        if (res.status === 200) {
          self.joblist = res.data
          console.log(res.data.length);
          // if (res.data.length !== 0) {
          //   this.list = res.data;
          //   this.havejob = true;
          // }
        }
        console.log(jobData.length);
      })
      .catch(e => {
        console.log(e);
      });
    }
  }
  // created: function () {
  //   this.getData() // 首次进入页面的时候也去获取一次table的data, page.pageNum设置了初始值是1
  // }
};
</script>
